<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仓颉编程语言 - 猜数字奇偶性游戏</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen">
    <div class="container mx-auto px-4 py-8 max-w-4xl">
        <!-- 页面标题 -->
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold text-gray-800 mb-2">
                <i class="fas fa-code text-blue-600 mr-2"></i>
                仓颉编程语言实战项目
            </h1>
            <h2 class="text-2xl text-blue-600 font-semibold">猜数字奇偶性游戏</h2>
        </div>

        <!-- 项目介绍卡片 -->
        <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-info-circle text-blue-500 mr-2"></i>
                项目介绍
            </h3>
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <h4 class="font-semibold text-gray-700 mb-2">游戏规则：</h4>
                    <ul class="text-gray-600 space-y-1">
                        <li><i class="fas fa-dice text-blue-500 mr-2"></i>程序随机生成1-100的整数</li>
                        <li><i class="fas fa-keyboard text-green-500 mr-2"></i>玩家输入"奇"或"偶"进行猜测</li>
                        <li><i class="fas fa-check-circle text-green-500 mr-2"></i>猜对显示"正确"</li>
                        <li><i class="fas fa-times-circle text-red-500 mr-2"></i>猜错显示"错误，答案是X"</li>
                        <li><i class="fas fa-redo text-blue-500 mr-2"></i>可选择是否继续游戏</li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold text-gray-700 mb-2">技术特点：</h4>
                    <ul class="text-gray-600 space-y-1">
                        <li><i class="fas fa-code text-purple-500 mr-2"></i>仓颉编程语言语法</li>
                        <li><i class="fas fa-random text-orange-500 mr-2"></i>随机数生成算法</li>
                        <li><i class="fas fa-keyboard text-blue-500 mr-2"></i>用户输入处理</li>
                        <li><i class="fas fa-code-branch text-green-500 mr-2"></i>条件判断逻辑</li>
                        <li><i class="fas fa-sync text-indigo-500 mr-2"></i>循环游戏机制</li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 代码展示区域 -->
        <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-file-code text-green-500 mr-2"></i>
                核心代码展示
            </h3>
            <div class="bg-gray-900 rounded-lg p-4 overflow-x-auto">
                <pre class="text-green-400 text-sm"><code>// 仓颉编程语言 - 猜数字奇偶性游戏
import std.console.*
import std.random.*
import std.convert.*

main(): Int64 {
    println("欢迎来到猜数字奇偶性游戏！")
    
    var playAgain = true
    var totalGames = 0
    var correctGuesses = 0

    while (playAgain) {
        // 生成随机数
        let randomNum = Random().nextInt(1, 101)
        totalGames++
        
        println("我已经想好了一个1-100之间的数字")
        print("请输入你的猜测（\"奇\"或\"偶\"）：")
        let userInput = Console.readLine()
        
        // 判断奇偶性
        let isEven = (randomNum % 2 == 0)
        let correctAnswer = if (isEven) "偶" else "奇"
        
        // 验证用户输入并给出结果
        if (userInput == "奇" || userInput == "偶") {
            if (userInput == correctAnswer) {
                println("🎉 正确！答案是${randomNum}")
                correctGuesses++
            } else {
                println("❌ 错误！答案是${randomNum}")
            }
        }
        
        // 询问是否继续
        print("是否继续游戏？（输入\"是\"继续）：")
        let continueInput = Console.readLine()
        playAgain = (continueInput == "是")
    }
    
    return 0
}</code></pre>
            </div>
        </div>

        <!-- 在线演示区域 -->
        <div class="bg-white rounded-lg shadow-lg p-6 mb-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-gamepad text-purple-500 mr-2"></i>
                在线演示版本
            </h3>
            <div class="bg-gray-50 rounded-lg p-6">
                <div class="text-center mb-4">
                    <button id="startGame" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition duration-300">
                        <i class="fas fa-play mr-2"></i>开始游戏
                    </button>
                </div>
                
                <div id="gameArea" class="hidden">
                    <div class="text-center mb-4">
                        <p class="text-lg text-gray-700">我已经想好了一个1-100之间的数字</p>
                        <p class="text-sm text-gray-500">猜猜它是奇数还是偶数？</p>
                    </div>
                    
                    <div class="flex justify-center space-x-4 mb-4">
                        <button id="guessOdd" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-2 px-4 rounded transition duration-300">
                            奇数
                        </button>
                        <button id="guessEven" class="bg-green-500 hover:bg-green-600 text-white font-bold py-2 px-4 rounded transition duration-300">
                            偶数
                        </button>
                    </div>
                    
                    <div id="result" class="text-center text-lg font-semibold mb-4"></div>
                    
                    <div class="text-center">
                        <button id="playAgain" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded transition duration-300 hidden">
                            再玩一次
                        </button>
                    </div>
                </div>
                
                <div id="gameStats" class="mt-4 text-center text-sm text-gray-600"></div>
            </div>
        </div>

        <!-- 部署说明 -->
        <div class="bg-white rounded-lg shadow-lg p-6">
            <h3 class="text-xl font-bold text-gray-800 mb-4">
                <i class="fas fa-rocket text-red-500 mr-2"></i>
                部署方案
            </h3>
            <div class="grid md:grid-cols-2 gap-6">
                <div>
                    <h4 class="font-semibold text-gray-700 mb-2">环境要求：</h4>
                    <ul class="text-gray-600 space-y-1">
                        <li><i class="fas fa-check text-green-500 mr-2"></i>仓颉编程语言环境境</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>支持CJ文件的编译器</li>
                        <li><i class="fas fa-check text-green-500 mr-2"></i>标准库支持</li>
                    </ul>
                </div>
                <div>
                    <h4 class="font-semibold text-gray-700 mb-2">运行步骤：</h4>
                    <ol class="text-gray-600 space-y-1">
                        <li><i class="fas fa-download text-blue-500 mr-2"></i>1. 下载项目文件</li>
                        <li><i class="fas fa-terminal text-purple-500 mr-2"></i>2. 打开终端/命令行</li>
                        <li><i class="fas fa-code text-green-500 mr-2"></i>3. 执行: <code>cj main.cj</code></li>
                        <li><i class="fas fa-gamepad text-orange-500 mr-2"></i>4. 按提示进行游戏</li>
                    </ol>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 在线演示版本的JavaScript实现
        let currentNumber = 0;
        let totalGames = 0;
        let correctGuesses = 0;

        document.getElementById('startGame').addEventListener('click', startNewGame);
        document.getElementById('guessOdd').addEventListener('click', () => makeGuess('奇'));
        document.getElementById('guessEven').addEventListener('click', () => makeGuess('偶'));
        document.getElementById('playAgain').addEventListener('click', startNewGame);

        function startNewGame() {
            currentNumber = Math.floor(Math.random() * 100) + 1;
            totalGames++;
            
            document.getElementById('startGame').classList.add('hidden');
            document.getElementById('gameArea').classList.remove('hidden');
            document.getElementById('result').innerHTML = '';
            document.getElementById('result').className = 'text-center text-lg font-semibold mb-4';
            document.getElementById('playAgain').classList.add('hidden');
            document.getElementById('guessOdd').disabled = false;
            document.getElementById('guessEven').disabled = false;
            
            updateStats();
        }

        function makeGuess(guess) {
            const isEven = currentNumber % 2 === 0;
            const correctAnswer = isEven ? '偶' : '奇';
            const isCorrect = guess === correctAnswer;
            
            if (isCorrect) {
                correctGuesses++;
                document.getElementById('result').innerHTML = 
                    `<div class="text-green-600">🎉 正确！答案是${currentNumber}，确实是${correctAnswer}数</div>`;
            } else {
                document.getElementById('result').innerHTML = 
                    `<div class="text-red-600">❌ 错误！答案是${currentNumber}，这是${correctAnswer}数</div>`;
            }
            
            document.getElementById('guessOdd').disabled = true;
            document.getElementById('guessEven').disabled = true;
            document.getElementById('playAgain').classList.remove('hidden');
            
            updateStats();
        }

        function updateStats() {
            const accuracy = totalGames > 0 ? (correctGuesses / totalGames * 100).toFixed(1) : 0;
            document.getElementById('gameStats').innerHTML = 
                `当前统计：总游戏${totalGames}次，正确${correctGuesses}次，准确率${accuracy}%`;
        }
    </script>
</body>
</html>